<template>
  <view class="page-container">
    <!-- 顶部用户栏 -->
    <view class="user-header">
      <!-- 背景图（可替换为实际图片） -->
      <image class="header-bg" src="/static/newsneed/background2.jpg" mode="widthFix"></image>
      <!-- 头像+欢迎语+登录按钮 -->
      <view class="user-info-wrap">
        <!-- 头像 -->
        <image class="avatar" src="/static/newsneed/touxiang.jpg" mode="aspectFill"></image>
        <!-- 欢迎语+登录 -->
        <view class="user-text">
          <text class="welcome-text">HI~欢迎回来</text>
          <button class="login-btn" @click="gotoLogin">登录</button>
        </view>
      </view>
      <!-- 关注/话题统计 -->
      <view class="stats-bar">
        <text class="stat-item">关注3</text>
        <text class="divider">|</text>
        <text class="stat-item">话题0</text>
      </view>
    </view>

    <!-- 功能按钮栏 -->
    <view class="func-bar">
      <view class="func-item" v-for="(item, idx) in funcList" :key="idx">
        <image class="func-icon" :src="item.icon" mode="widthFix"></image>
        <text class="func-text">{{ item.text }}</text>
      </view>
    </view>

    <!-- 红包广告栏 -->
    <view class="ad-banner">
      <image class="ad-img" src="/static/newsneed/advertisement.jpg" mode="widthFix"></image>
    </view>

    <!-- 发布引导区 -->
    <view class="publish-guide">
      <!-- 图标区域 -->
      <view class="icon-group">
        <image class="guide-icon" src="/static/icons/video-icon.png" mode="widthFix"></image>
        <image class="guide-icon" src="/static/icons/pic-icon.png" mode="widthFix"></image>
        <image class="guide-icon" src="/static/icons/link-icon.png" mode="widthFix"></image>
      </view>
      <!-- 文字说明 -->
      <text class="guide-text">已有385,893人\n在这里发布身边的新鲜事</text>
      <!-- 按钮组 -->
      <button class="publish-btn" @click="gotoPublish">我也发布</button>
      <navigator class="browse-link" @click="gotoBrowse">先去逛逛></navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 功能按钮列表
      funcList: [
        { icon: "/static/newsneed/collection.png", text: "收藏" },
        { icon: "/static/newsneed/setup.png", text: "历史" },
        { icon: "/static/newsneed/history.png", text: "设置" }
      ]
    };
  },
  methods: {
    // 跳转登录页
    gotoLogin() {
      uni.navigateTo({ url: "/pages/login/login" });
    },
    // 跳转发布页
    gotoPublish() {
      uni.navigateTo({ url: "/pages/publish/publish" });
    },
    // 跳转逛逛页
    gotoBrowse() {
      uni.navigateTo({ url: "/pages/browse/browse" });
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.page-container {
  min-height: 100vh;
  background-color: #fff;
}

/* 顶部用户栏 */
.user-header {
  position: relative;
}
/* 头部背景图 */
.header-bg {
  width: 100%;
  height: 300px;
  opacity: 0.8;
}
/* 用户信息区域 */
.user-info-wrap {
  position: absolute;
  top: 30rpx;
  left: 20rpx;
  display: flex;
  align-items: center;
}
/* 头像 */
.avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}
/* 欢迎语+登录按钮 */
.user-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.welcome-text {
  font-size: 38rpx;
  color: #fff;
  margin-bottom: 8rpx;
}
.login-btn {
  width: 150rpx;
  height: 40rpx;
  line-height: 40rpx;
  background-color: #f5222d;
  color: #fff;
  font-size: 24rpx;
  border-radius: 20rpx;
  padding: 0;
}
/* 关注/话题统计栏 */
.stats-bar {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 35rpx;
  margin-left: 50px;
}
.stat-item {
  margin: 0 30rpx;
}
.divider {
  color: #eee;
  margin: 0 50px;
  
}

/* 功能按钮栏 */
.func-bar {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.func-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 8rpx;
}
.func-text {
  font-size: 24rpx;
  color: #333;
}

/* 红包广告栏 */
.ad-banner {
  padding: 15rpx;
}
.ad-img {
  width: 100%;
  height: auto;
  border-radius: 8rpx;
}

/* 发布引导区 */
.publish-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
  text-align: center;
}
/* 图标组 */
.icon-group {
  display: flex;
  gap: 40rpx;
  margin-bottom: 30rpx;
}
.guide-icon {
  width: 80rpx;
  height: 80rpx;
}
/* 引导文字 */
.guide-text {
  font-size: 26rpx;
  color: #999;
  line-height: 40rpx;
  margin-bottom: 40rpx;
}
/* 按钮组 */
.publish-btn {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  border: 2rpx solid #f5222d;
  color: #f5222d;
  background-color: #fff;
  font-size: 28rpx;
  border-radius: 30rpx;
  margin-bottom: 20rpx;
}
.browse-link {
  font-size: 26rpx;
  color: #666;
}
</style>